<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
	<mytemp><hr /></mytemp>
	<mytemp><hr /></mytemp>
	<mytemp><hr /></mytemp>
</div>

<template id="tem1">
	<div>
		<input type="button" value="赞" @click="click1" />
		<h3>{{count}}</h3>
		<slot></slot>
	</div>
</template>

<script type="text/javascript">
	var obj = {
		count: 0
	}
	Vue.component('mytemp', {
		template: '#tem1',
		// data: function () { return obj },
		// 数据（obj）写外外面相当于共享，要想独立就要闭包,下面的就是闭包
		data: function () { return { count: 0 } },
		methods: {
			click1() {
				this.count++
			}
		}
	})

	var vm = new Vue({
		el: '#app',
		data: {},
		methods: {},
	})
</script>